@import url(./base.less);

@rootSize: 37.5rem;
body {
  padding: 0 (15 / @rootSize);
}


 .main {
  padding-bottom: (50/@rootSize);
  .top{
    display: flex;
    justify-content: space-between;
    height: (46/@rootSize);
    padding: (7/@rootSize) 0;
    margin-bottom: (15/@rootSize);
    .left{
      display: flex;
      align-items: center ;
      h5 {
        font-size: (16/@rootSize);
        font-weight: 400;
      }
    }
    .center {
        flex:1; 
        display: flex;
        align-items: center;
        background-color: #f7f7f7;
        border-radius: (20/@rootSize);
        margin: 0 (26/@rootSize);
        padding-left: (16/@rootSize);
        font-size: (16/@rootSize);
       color: #989898;
        i {
          margin-right: (5/@rootSize);
        }
    }
    .right {
      display: flex;
      align-items: center;
     img {
      height: (20/@rootSize);
     }
    }
   }
   .banner {
    background-color: #f9f9f9;
    .bottom{
      height: (20/@rootSize);
      margin-top: (10/@rootSize);
      display: flex;
      justify-content: center;
  
      .b1{
        width: (10/@rootSize);
        height: (5/@rootSize);
        border-radius: (2/@rootSize);
        background-color: #353535;
      }
      .b2 {
        margin: 0 (3/@rootSize  );
        width: (5/@rootSize);
        height: (5/@rootSize);
        border-radius: (2/@rootSize);
       background-color: #989898;
      }
    }
   }
   .nav {
    position: relative;
    height: (70/@rootSize);
    background-color: #f9f9f9;
    padding-bottom: (80/@rootSize);
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: (165/@rootSize);
        border-radius: (5/@rootSize);
        overflow: hidden;
      }
    }
    .bgc1 {
      left:(-15/@rootSize);
      top: (-35/@rootSize);
      position: absolute;
      width: (15/@rootSize);
      height: (180/@rootSize);
      background-color: #f9f9f9;
    }
    .bgc2 {
      right:(-15/@rootSize);
      top: (-35/@rootSize);
      position: absolute;
      width: (15/@rootSize);
      height: (180/@rootSize);
      background-color: #f9f9f9;
    }
   }
  .discount {
    height: (240/@rootSize);
    .discount_hd {
     
      display: flex;
      justify-content: space-between;
      height: (35/@rootSize);
      background-color:#f9f9f9 ;
      h5 {
        line-height:(35/@rootSize);
        height:(35/@rootSize) ;
      }
      .more {
        display: flex;
        align-items: center;
       img {
        height: (18/@rootSize);
       }
      }
      
    }
    .discount_bd {
      
      display: flex;
      justify-content: space-between;
      .discount_bd1{
        width: (170/@rootSize);
        h5 {
          margin-top: (10/@rootSize);
          font-size: (13/@rootSize);
        }
        span {
          font-size: (11/@rootSize);
          color: #999999;
          margin: (8/@rootSize) 0 (12/@rootSize);
        }
        p {
          font-size: (11/@rootSize);
          color: #f39800;
          font-weight: 700;
        }
      }
      .discount_bd2{
        width: (170/@rootSize);
        h5 {
          margin-top: (10/@rootSize);
          font-size: (13/@rootSize);
        }
        span {
          font-size: (11/@rootSize);
          color: #999999;
          margin: (8/@rootSize) 0 (12/@rootSize);
        }
        p {
          font-size: (11/@rootSize);
          color: #f39800;
          font-weight: 700;
        }
      }
    }
  }
  .recommend {
    margin-top: (20/@rootSize);
    .recommend_hd{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: (35/@rootSize);
      .right {
        width: (125/@rootSize);
         display: flex;
         justify-content: space-evenly;
         font-size: (14/@rootSize);
         .r1 {
           display: flex;
           flex-direction: column;
           align-items: center;
          img {
            width: (12/@rootSize);
          }
         }
         .r2 {
          color: #999999;
         }
      }
      
    }
    .recommend_bd{
      margin-top: (10/@rootSize);
      .home{
        display: flex;
        .pic {
          margin-right: (15/@rootSize);
         img {
          width: (110/@rootSize);
         }
        }
        .content {
          .ellipsis {
            white-space: nowrap; /* 禁止文字换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 用省略号代替超出部分 */
          }
         
          h5 {
            font-size: (15/@rootSize);
           
          }
          p {
            width: (217/@rootSize);
            font-size: (11/@rootSize);
            color: #999999;
            margin-top: (5/@rootSize);
          }
          span {
            color: #999999;
            display: inline-block;
            width: (45/@rootSize);
            height: (15/@rootSize);
            border: 1px solid #989898;
            text-align: center;
            line-height: (15/@rootSize);
            margin-right: (10/@rootSize);
            font-size: (12/@rootSize);
            border-radius: (3/@rootSize);
          }
          .price{
            display: flex;
            font-size:(13/@rootSize) ;
            color: #f39800;
           align-items: center;
            em {
              font-style: normal;
              font-size:(13/@rootSize) ;
           
           } 
           i {font-size: (10/@rootSize);
            font-style: normal;
          }
          }
        }
      }
    }
  }
  .view {
    margin:(20/@rootSize) 0;
    display: flex;
    justify-content: center;
   h5 {
    width: (260/@rootSize);
    height: (38/@rootSize);
    background-color: #f2f2f3;
    font-size: (13/@rootSize);
    text-align: center;
    line-height: (38/@rootSize);
    border-radius: (30/@rootSize);
    font-weight: 400;
    color: #b3b3b3;
   }

  }
  .other {
    height: (85/@rootSize);
  }
 }

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: (50 / @rootSize);
  background-color: #fff;
  border-top: (1 / @rootSize) solid #f5f5f5;
  z-index: 999;
  ul {
    margin-top: (5/@rootSize);
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
         height: (30/@rootSize);
      a {
        display: flex;
        display: block;
        color: #c7c7c7;
        justify-content: center;
        align-items: center;
        width: (50/@rootSize);
        height: (30/@rootSize);
        text-align: center;
        i {
          width: (50/@rootSize);
          font-size: (20 / @rootSize);
        }
        p {
          margin-top: (3/@rootSize);
          font-size: (11 / @rootSize);
        }
      }
      .current {
        color: #353535
      }
    }
  }
}
